import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux} from 'dva/router';
import { WingBlank, WhiteSpace, Flex, List, InputItem, Button, Toast } from 'antd-mobile';
import { createForm } from 'rc-form';

const SignAuthPage = ({ dispatch, form, location, btn, backGround, clock, wait, isDisabled, ...rest }) => {
  const { getFieldProps, getFieldError, validateFields } = form;
  if(getFieldValue('mobile') == "undefined"){
    getFieldValue('mobile') == '';
  }
  const signup = () =>{
       dispatch(
          routerRedux.push({
            pathname: `/signup`,
            state: { 
              title: '注册', 
              type: 'regist' 
            },
          }),
        );
       btn = "获取验证码";
       backGround = "#aa4929";
       clearInterval(clock);
       wait = 60;
       isDisabled = false;
       dispatch({ 
        type: 'account/save', 
        payload: { 
          btn: btn, backGround: backGround ,
          clock:clock, isDisabled: isDisabled, wait:wait
        }});
    }

    const forgot = () => {
       dispatch(
           routerRedux.push({
            pathname: `/forgot`,
             state: { title: '找回密码', type: 'update'},
          }),
       );
        btn = "获取验证码";
        backGround = "#aa4929";
        clearInterval(clock);
        isDisabled =false;
        wait = 60;
        dispatch({ 
          type: 'account/save', 
          payload: { 
            btn: btn, backGround: backGround ,  
            clock:clock, isDisabled: isDisabled, wait:wait
        }});
    }
  const signin = () =>
    validateFields((errors, value) => {
      if (errors) {
        const fieldNames = Object.keys(errors);
        if (fieldNames[0]) {
          return Toast.fail(getFieldError(fieldNames[0]));
        }
      }

      dispatch({
        type: 'account/signin',
        payload: {
          ...value,
          openid: location.query.openid,
        },
      });
    });

  return (
    <WingBlank size="md">
      <WhiteSpace size="xl" />
      <List>
        <InputItem
          {...getFieldProps('mobile', {
            validate: [
              {
                trigger: false,
                rules: [{ required: true, message: '请输入账号' }],
              },
            ],
          })}
          placeholder="请输入手机号码"
        >
          账号：
        </InputItem>
        <InputItem
          {...getFieldProps('pswd', {
            validate: [
              {
                trigger: false,
                rules: [{ required: true, message: '请输入密码' }],
              },
            ],
          })}
          type="password"
          placeholder="请输入密码"
        >
          密码：
        </InputItem>
      </List>
      <WhiteSpace size="xl" />
      <Button type="primary" onClick={signin}>
        立即登录
      </Button>
      <WhiteSpace size="xl" />
      <Flex>
        <Flex.Item>
            <div onClick={signup} style={{color: '#aa4929'}}>免费注册</div>
        </Flex.Item>
        <Flex.Item>
          <Flex justify="end">
            <div onClick={forgot} style={{color: '#aa4929'}}>忘记密码？</div>
          </Flex>
        </Flex.Item>
      </Flex>
    </WingBlank>
  );
};

export default connect(({ account }) => ({ ...account }))(createForm()(SignAuthPage));
